/**
 *  @description: 权限指令文件
 *
 * 需要在 html 元素上使用 v-permission="'admin'" 这种形式来使用
 * admin 是这个按钮所需要的权限
 * 相当于 传入 admin 这个值
 * 代表不是 admin 角色的用户,这个按钮就不显示
 * 也可以传入数组,比如 v-permission="['admin','test']"
 * 代表 admin 和 test 角色的用户都可以看到这个按钮
 * 其他角色的用户看不到这个按钮
 *
 */

import { useUserStore } from "@/store/auth";

export default {
  //指令绑定到元素上之前调用
  beforeMount(el: any, binding: any) {
    // 先判断我目前的权限包不包含这个按钮所需要的权限
    // 从 pinia 的 user store 里面获取当前用户的权限信息
    const userStore = useUserStore();
    const roles = userStore.roles;

    // 创建这个按钮需要的权限
    const requirePermission = binding.value;
    // 判断用户是否传的是数组
    if (Array.isArray(requirePermission)) {
      // 如果是数组,那么就判断我是否包含这个权限
      const hasPermission = requirePermission.some((item) =>
        roles.includes(item)
      );
      if (!hasPermission) {
        el.style.display = "none";
      }
    } else {
      // 如果不是数组,那么直接判断
      if (!roles.includes(requirePermission)) {
        el.style.display = "none";
      }
    }
  },
};
